<template>
  <!-- <dv-full-screen-container> -->
  <div class="box">
    <div class="top-title">
      <span>浙江省淡水水产研究所基地管理平台</span>
    </div>
    <!-- <div class="content"></div> -->
    <div class="main-left">
      <div class="jdgk-box">
        <div class="box-title">基地概况</div>
        <div class="main-box">
          <div class="text-box" v-for="item in list" :key="item.name">
            <div class="icon-box">
              <div class="icon" :style="item.bg"></div>
              <span class="icon-text">{{ item.name }}</span>
            </div>
            <!-- <dv-digital-flop
              :config="item.config"
              style="width: 150px; height: 42px; margin-left: 56px"
            /> -->
            <counin
              :startVal="0"
              :endVal="item.value"
              :speed="800"
              :decimals="item.typeText == '人' ? 0 : 2"
              :isReverse="false"
              :typeText="item.typeText"
              style="
                width: 100%;
                height: 42px;
                color: yellow;
                font-size: 20px;
                display: flex;
                justify-content: center;
                align-items: center;
                font-weight: 600;
              "
            >
            </counin>
          </div>
        </div>
      </div>
      <div class="jdgk-box">
        <div class="box-title">经营品种</div>
        <div class="main-box">
          <div
            ref="echarts11"
            id="echarts11"
            style="width: 100%; height: 100%"
          ></div>
        </div>
      </div>
      <div class="jdgk-box">
        <div class="box-title">设备运行</div>
        <div class="main-box" style="overflow: hidden; padding-bottom: 10px">
          <div
            class="text-box"
            style="width: 30%; height: 50px"
            v-for="item in deviceListCount"
            :key="item.name"
          >
            <span class="icon-text device-box"
              >{{ item.name
              }}<span class="device-text"> {{ item.num }} </span>台</span
            >
          </div>
          <!-- <dv-scroll-board
            :config="tabConfig"
            style="width: 100%; height: calc(100% - 90px); padding: 0 16px"
          /> -->
          <div class="backround">
            <div class="toptitle">
              <div class="item">序号</div>
              <div class="item">设备名称</div>
              <div class="item">运行状况</div>
            </div>
            <vue-seamless-scroll
              :data="listData"
              :class-option="optionHover"
              class="seamless-warp"
            >
              <!-- <el-table :data="listData" border :show-header="status">
                <el-table-column
                  type="index"
                  width="50"
                  label="序号"
                ></el-table-column>
                <el-table-column prop="name" label="设备名称">
                </el-table-column>
                <el-table-column prop="info" label="运行状况">
                </el-table-column>
              </el-table> -->
            </vue-seamless-scroll>
          </div>
        </div>
      </div>
    </div>

    <div
      class="main-clearfix"
      style="
        width: calc(50% - 80px);
        height: 800px;
        float: left;
        position: relative;
        margin-top: 40px;
      "
    >
      <vue-draggable-resizable
        w="auto"
        h="auto"
        :grid="[20, 40]"
        :resizable="false"
        :draggable="false"
      >
        <div
          style="
            color: #f0f0f0;
            width: 100%;
            text-align: center;
            position: absolute;
            top: -34px;
            left: 0;
          "
        >
          <span
            v-for="(pointParam, i) in realDataObjWeather['pointParams']"
            :key="pointParam.index"
            :span="12"
            v-if="i < 5"
          >
            {{ pointParam.paramInfo.name }}:<span
              v-html="realDataObjWeather[pointParam.paramId]"
            ></span
            >{{ pointParam.paramInfo.unit
            }}<span
              style="margin: 0px 5px 0px 5px"
              v-if="i !== realDataObjWeather['pointParams'].length - 1"
              >|</span
            >
          </span>
        </div>

        <img :src="pmtUrl" style="width: 100%; height: 800px" />
        <!--              <img :src="pmtUrl" style="width: 1918px;height: 1012px;">-->
        <div
          v-for="collectPoint in collectPointList"
          :key="collectPoint.name"
          style="position: absolute"
          :style="{
            top: collectPoint.longitude / 1.25 + 'px',
            left: collectPoint.latitude / 2.5 + 'px',
          }"
          v-if="collectPoint.ispmt == 'Y'"
        >
          <div>
            <img
              :src="pic"
              @click="clickSite(collectPoint)"
              style="cursor: pointer"
            />
          </div>
          <div style="margin-left: 3px">
            <div
              style="
                width: 8px;
                height: 10px;
                box-sizing: border-box;
                background: linear-gradient(
                  120deg,
                  transparent 58.5%,
                  #0099ff 58.5%,
                  rgba(0, 175, 255, 0.6) 61.5%
                );
                float: left;
              "
            ></div>
            <div
              style="
                width: 8px;
                height: 10px;
                box-sizing: border-box;
                background: linear-gradient(
                  -120deg,
                  transparent 58.5%,
                  #0099ff 58.5%,
                  rgba(0, 175, 255, 0.6) 61.5%
                );
                float: left;
              "
            ></div>
          </div>
          <div
            @click="clickSite(collectPoint)"
            style="
              clear: both;
              color: white;
              font-size: 12px;
              border: 1px solid #027afc;
              border-radius: 5px;
              padding: 2px;
              background-color: rgba(0, 175, 255, 0.6);
              cursor: pointer;
            "
          >
            {{ collectPoint.name }}
          </div>
        </div>

        <div
          style="position: absolute"
          :style="{
            top: parseInt(collectPoint.longitude / 1.27) - 30 + 'px',
            left: parseInt(collectPoint.latitude / 2.3) + 30 + 'px',
          }"
        >
          <div
            @click="clickSiteCrol(collectPoint)"
            style="
              color: white;
              font-size: 12px;
              border: 1px solid #027afc;
              border-radius: 5px;
              padding: 2px;
              background-color: rgba(0, 175, 255, 0.6);
              cursor: pointer;
            "
          >
            6#控制
          </div>
          <div style="margin-left: 3px">
            <div
              style="
                width: 8px;
                height: 10px;
                box-sizing: border-box;
                background: linear-gradient(
                  60deg,
                  transparent 58.5%,
                  #0099ff 58.5%,
                  rgba(0, 175, 255, 0.6) 61.5%
                );
                float: left;
              "
            ></div>
            <div
              style="
                width: 8px;
                height: 10px;
                box-sizing: border-box;
                background: linear-gradient(
                  -60deg,
                  transparent 58.5%,
                  #0099ff 58.5%,
                  rgba(0, 175, 255, 0.6) 61.5%
                );
                float: left;
              "
            ></div>
          </div>
          <div style="clear: both">
            <img
              :src="pic"
              @click="clickSiteCrol(collectPoint)"
              style="cursor: pointer"
            />
          </div>
        </div>
      </vue-draggable-resizable>
    </div>
    <div class="main-right">
      <div class="jdgk-box">
        <div class="box-title">技术模式</div>
        <div class="main-box main_padding" style="overflow: hidden">
          <div class="title-box-text">
            <div
              class="text-left"
              :style="{
                'background-color': isColor == 0 ? 'rgba(20, 50, 84,0.7)' : '',
              }"
              @click="handleChangeColor(0)"
            >
              <div class="text-box1">
                种植模式<span style="color: yellow; font-size: 26px"> 6 </span
                >种
              </div>
            </div>
            <div
              class="text-right"
              :style="{
                'background-color': isColor == 1 ? 'rgba(20, 50, 84,0.7)' : '',
              }"
              @click="handleChangeColor(1)"
            >
              <div class="text-box1">
                绿色技术<span style="color: yellow; font-size: 26px"> 8 </span
                >项
              </div>
            </div>
          </div>
          <div class="box-content" v-if="isColor == 0">
            <div class="child_box" v-for="item in listText" :key="item.name">
              <i class="listText-icon" :style="item.icon"></i
              ><span>{{ item.name }}</span>
            </div>
          </div>
          <!-- 技术八项 -->
          <div class="seamless_box color" style="width: 100%; overflow: hidden">
            <vue-seamless-scroll
              :data="listData"
              :class-option="optionHover"
              class="seamless-warp_content color box-content"
              v-if="isColor == 1"
            >
              <div
                class="child_box2"
                v-for="item in listText2"
                :key="item.name"
              >
                <i class="listText-icon" :style="item.icon"></i
                ><span>{{ item.name }}</span>
              </div>
            </vue-seamless-scroll>
          </div>
        </div>
      </div>
      <div class="jdgk-box">
        <div class="box-title" style="height: 40px">农事日历</div>
        <div class="box_main main_padding">
          <div class="title-box-text">
            <div
              class="text-left"
              :style="{
                'background-color': isColor2 == 0 ? 'rgba(20, 50, 84,0.7)' : '',
              }"
              @click="handleChangeColor2(0)"
            >
              <div class="text-box1">生产管理</div>
            </div>
            <div
              class="text-right"
              :style="{
                'background-color': isColor2 == 1 ? 'rgba(20, 50, 84,0.7)' : '',
              }"
              @click="handleChangeColor2(1)"
            >
              <div class="text-box1">对外服务</div>
            </div>
          </div>
          <div class="main-box" style="height: auto">
            <div
              class="text-box"
              style="width: 50%"
              v-for="item in list2"
              :key="item.name"
            >
              <div class="icon-box">
                <div class="icon icon_h" :style="item.bg"></div>
                <span class="icon-text">{{ item.name }}</span>
              </div>
              <!-- <dv-digital-flop
              :config="item.config"
              style="width: 150px; height: 42px; margin-left: 56px"
            /> -->
              <counin
                :startVal="0"
                :endVal="item.value"
                :speed="800"
                :decimals="item.typeText == '公斤' ? 2 : 0"
                :isReverse="false"
                :typeText="item.typeText"
                style="
                  width: 100%;

                  color: yellow;
                  font-size: 24px;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                "
              >
              </counin>
            </div>
          </div>
        </div>
      </div>
      <div class="jdgk-box">
        <div class="box-title">监控预警</div>
        <div class="main_padding">
          <div class="title-box-text_middle">
            <div
              class="text-left"
              style="margin-right: 15px; width: 100%; font-size: 18px"
              :style="{
                'background-color':
                  isColor3 == 0 ? 'rgba(48, 83, 149,0.5)' : '',
              }"
              @click="handleChangeColor3(0)"
            >
              <div class="text-box1">产地环境</div>
            </div>
            <div
              class="text-right"
              style="width: 100%; font-size: 18px"
              :style="{
                'background-color':
                  isColor3 == 1 ? 'rgba(48, 83, 149,0.5)' : '',
              }"
              @click="handleChangeColor3(1)"
            >
              <div class="text-box1">养殖水质</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <el-dialog
      :visible.sync="detailOpen"
      v-if="detailOpen"
      width="1200px"
      :center="true"
      append-to-body
      @close="closeDetailDialog"
    >
      <siteDetail ref="refSiteDetail" :collectPoint="collectPointVo" />
    </el-dialog>

    <el-dialog
      :visible.sync="detailCrolOpen"
      v-if="detailCrolOpen"
      width="1200px"
      :center="true"
      append-to-body
      @close="closeDetailCrolDialog"
    >
      <siteDetailCrol ref="refSiteDetailCrol" :collectPoint="collectPoint" />
    </el-dialog>
  </div>
  <!-- </dv-full-screen-container> -->
</template>

<script>
import { autoHover } from "../../../utils/autoHover.js";
import { listVideoInfo } from "@/api/basic/videoInfo";
import VueDraggableResizable from "vue-draggable-resizable";
import { listCollectPointAndStatus } from "@/api/basic/collectPoint";
import { realDataWeather } from "@/api/basic/hisMain";
import siteDetail from "./siteDetail";
import siteDetailCrol from "./siteDetailCrol";
import counin from "./counin.vue";
import echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme

import { getSysConfig } from "@/api/basic/sysConfig";
const defaultSettings = require("@/settings.js");
export default {
  name: "Myecharts",
  props: {},
  components: {
    VueDraggableResizable,
    siteDetail,
    siteDetailCrol,
    counin,
  },
  data() {
    return {
      listText: [
        {
          name: "种 草 养 虾",
          icon:
            "background-image: url(" +
            require("../../../assets/image/种草养虾.png") +
            ")",
        },
        {
          name: "池 塘 精 养",
          icon:
            "background-image: url(" +
            require("../../../assets/image/池塘精养.png") +
            ")",
        },
        {
          name: "鱼 鳖 混 养",
          icon:
            "background-image: url(" +
            require("../../../assets/image/鱼鳖混养.png") +
            ")",
        },
        {
          name: "虾 稻 共 生",
          icon:
            "background-image: url(" +
            require("../../../assets/image/虾稻共生.png") +
            ")",
        },
        {
          name: "设 施 养 殖",
          icon:
            "background-image: url(" +
            require("../../../assets/image/设施养殖.png") +
            ")",
        },
        {
          name: "接 力 养 殖",
          icon:
            "background-image: url(" +
            require("../../../assets/image/接力养殖.png") +
            ")",
        },
      ],
      listText2: [
        {
          name: "苗 种 检 疫",
          icon:
            "background-image: url(" +
            require("../../../assets/image/苗种检疫.png") +
            ")",
        },
        {
          name: "精 准 投 饲",
          icon:
            "background-image: url(" +
            require("../../../assets/image/精准投饲.png") +
            ")",
        },
        {
          name: "病 原 诊 断",
          icon:
            "background-image: url(" +
            require("../../../assets/image/病原诊断.png") +
            ")",
        },
        {
          name: "疫 苗 免 疫",
          icon:
            "background-image: url(" +
            require("../../../assets/image/疫苗免疫.png") +
            ")",
        },
        {
          name: "水 质 调 控",
          icon:
            "background-image: url(" +
            require("../../../assets/image/水质调控.png") +
            ")",
        },
        {
          name: "智 能 增 氧",
          icon:
            "background-image: url(" +
            require("../../../assets/image/智能增氧.png") +
            ")",
        },
        {
          name: "尾 水 处 理",
          icon:
            "background-image: url(" +
            require("../../../assets/image/尾水处理.png") +
            ")",
        },
        {
          name: "地 质 改 良",
          icon:
            "background-image: url(" +
            require("../../../assets/image/地质改良.png") +
            ")",
        },
      ],
      isColor: 0,
      isColor2: 0,
      isColor3: 0,
      list: [
        {
          name: "用地面积",
          value: 430.95,
          bg:
            "background-image: url(" +
            require("../../../assets/image/用地面积.png") +
            ")",
          typeText: "亩",
        },
        {
          name: "池塘面积",
          value: 225,
          bg:
            "background-image: url(" +
            require("../../../assets/image/池塘面积.png") +
            ")",
          typeText: "亩",
        },
        {
          name: "温室面积",
          value: 4500,
          bg:
            "background-image: url(" +
            require("../../../assets/image/温室面积.png") +
            ")",
          typeText: "平方",
        },
        {
          name: "基地员工",
          value: 20,
          bg:
            "background-image: url(" +
            require("../../../assets/image/基地员工.png") +
            ")",
          typeText: "人",
        },
      ],
      list2: [
        {
          name: "物料领用",
          value: 256,
          bg:
            "background-image: url(" +
            require("../../../assets/image/物料领用.png") +
            ")",
          typeText: "批次",
        },
        {
          name: "饲料投喂",
          value: 24.78,
          bg:
            "background-image: url(" +
            require("../../../assets/image/饲料投喂.png") +
            ")",
          typeText: "公斤",
        },
        {
          name: "苗种销售",
          value: 5875,
          bg:
            "background-image: url(" +
            require("../../../assets/image/苗种销售.png") +
            ")",
          typeText: "万尾",
        },
        {
          name: "商品产出",
          value: 758,
          bg:
            "background-image: url(" +
            require("../../../assets/image/商品产出.png") +
            ")",
          typeText: "公斤",
        },
      ],
      fontColor: "#fff",
      value: [
        {
          name: "红鳌鳌虾",
          value: 456,
        },
        {
          name: "罗氏沼虾",
          value: 231,
        },
        {
          name: "鳜鱼",
          value: 121,
        },
        {
          name: "中华鳖",
          value: 45,
        },
        {
          name: "光唇鱼",
          value: 154,
        },
        {
          name: "翘嘴鲌",
          value: 67,
        },
      ],
      deviceListCount: [
        {
          name: "正常",
          num: 48,
        },
        {
          name: "故障",
          num: 7,
        },
        {
          name: "报废",
          num: 2,
        },
      ],
      videoInfoList: [],
      queryParams: {
        pageNum: 1,
        pageSize: 100,
      },
      hkvInfo: {
        ip: "", //海康威视摄像头/硬盘录像机的ip地址
        port: "", //海康威视摄像头/硬盘录像机的端口
        username: "", //海康威视摄像头/硬盘录像机的用户名
        password: "", //海康威视摄像头/硬盘录像机的密码
        channels: [], //海康威视摄像头/硬盘录像机的通道
      },
      pointId: 15,
      collectPoint: {},
      sysName: defaultSettings.title,
      pmtUrl: require("@/assets/image/pmt.png"),
      pic: require("@/assets/image/area.png"),
      indexset: "浙江省淡水研究所德清基地信息化服务平台",
      sysConfig: {},
      nowDate: "", // 当前日期
      heightAll: 0,
      realDataObjWeather: { pointParams: [] },
      collectPointList: [],
      collectPointStatusMap: {},
      realDatas: {},
      detailTitle: "",
      detailOpen: false,
      detailCrolOpen: false,
      collectPointVo: {},
      status: false,
      listData: [],
    };
  },
  watch: {},
  computed: {
    optionHover() {
      return {
        step: 0.5, // 数值越大速度滚动越快
        limitMoveNum: 1, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 45, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
      };
    },
  },
  created() {
    if (document.body.clientHeight <= 860) {
      this.heightAll = 860;
    } else {
      this.heightAll = document.body.clientHeight;
    }
    this.initWindow();
    setInterval(this.showTimes, 1000);
    this.querySysConfig();
    this.getRealDataWeather();
    this.getList2();
  },
  mounted() {
    this.getCharts();
    this.getList();
  },
  methods: {
    handleChangeColor(type) {
      this.isColor = type;
    },
    handleChangeColor2(type) {
      this.isColor2 = type;
    },
    handleChangeColor3(type) {
      this.isColor3 = type;
    },
    getList2() {
      listCollectPointAndStatus().then((response) => {
        this.collectPointList = response.collectPoints;
        this.collectPoint = this.collectPointList.find((item) => item.id == 15);
        this.collectPointStatusMap = response.collectPointStatus;
        this.realDatas = response.realDatas;
      });
    },
    clickSite(collectPoint) {
      this.collectPointVo = collectPoint;
      this.detailOpen = true;
    },
    clickSiteCrol() {
      this.detailCrolOpen = true;
    },
    closeDetailDialog() {
      this.$refs.refSiteDetail.clickStopRealPlay();
      this.$refs.refSiteDetail.onLogout();
    },
    closeDetailCrolDialog() {
      this.$refs.refSiteDetailCrol.clickStopRealPlay();
      this.$refs.refSiteDetailCrol.onLogout();
    },
    getRealDataWeather() {
      this.realDataObjWeather = {};
      realDataWeather({}).then((response) => {
        this.realDataObjWeather = response.data;
      });
    },
    initWindow() {
      let _this = this;
      window.onresize = () => {
        return (() => {
          if (document.body.clientHeight <= 860) {
            _this.heightAll = 860;
          } else {
            _this.heightAll = document.body.clientHeight;
          }
        })();
      };
    },
    toDetail() {
      this.$router.push("/breedDetail");
    },
    toIndex() {
      window.open(window.location.origin + "/index", "_blank");
    },
    toVideo() {
      window.open(window.location.origin + "/monitorVideo", "_blank");
    },
    querySysConfig() {
      getSysConfig().then((response) => {
        if (response.data.relPmtPic != undefined && response.data.relPmtPic) {
          this.sysConfig = response.data;
          this.pmtUrl = response.data.jdPic;
          this.indexset = response.data.indexset;

          this.sysConfig.jdIntro = this.sysConfig.jdIntro.replace(
            /\n/g,
            "<br/>"
          );
          this.sysConfig.jdIntro = this.sysConfig.jdIntro.replace(
            / /g,
            " &nbsp"
          );
        }
      });
    },
    currentTime() {
      setInterval(this.formatDate, 500);
    },
    formatDate() {
      let date = new Date();
      let year = date.getFullYear(); // 年
      let month = date.getMonth() + 1; // 月
      let day = date.getDate(); // 日
      let week = date.getDay(); // 星期
      let weekArr = [
        "星期日",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
      ];
      let hour = date.getHours(); // 时
      hour = hour < 10 ? "0" + hour : hour; // 如果只有一位，则前面补零
      let minute = date.getMinutes(); // 分
      minute = minute < 10 ? "0" + minute : minute; // 如果只有一位，则前面补零
      let second = date.getSeconds(); // 秒
      second = second < 10 ? "0" + second : second; // 如果只有一位，则前面补零
      this.nowDate = `${year}/${month}/${day} ${hour}:${minute}:${second} ${weekArr[week]}`;
    },
    clickSiteCrol() {
      this.detailCrolOpen = true;
    },

    getCharts() {
      let chartBox = echarts.init(this.$refs.echarts11);
      console.log(document.getElementById("main"));
      let option = {
        color: [
          "#bf19ff",
          "#854cff",
          "#5f45ff",
          "#02cdff",
          "#314976",
          "#00ff00",
          "#f47a75",
          "#009db2",
          "#024b51- 0780cf",
          "#765005",
        ],
        backgroundColor: "",
        grid: {
          bottom: 150,
          left: 100,
          right: "10%",
        },
        tooltip: {
          trigger: "item",
          formatter: "{b}<br/>({d}%)",
        },
        legend: {
          orient: "vertical",
          y: "center",
          right: 20,
          textStyle: {
            color: "#f2f2f2",
            fontSize: 20,
          },
          icon: "roundRect",
          data: this.value,
        },
        series: [
          // 主要展示层的
          {
            radius: ["50%", "90%"],
            center: ["40%", "50%"],
            type: "pie",
            label: {
              position: "inner",
              formatter: "{b}：({d}%)",
            },
            labelLine: {
              normal: {
                show: true,
                length: 30,
                length2: 55,
              },
              emphasis: {
                show: true,
              },
            },
            data: this.value,
          },
          // 边框的设置
          {
            radius: ["45%", "50%"],
            center: ["40%", "50%"],
            type: "pie",
            label: {
              normal: {
                show: false,
              },
              emphasis: {
                show: false,
              },
            },
            labelLine: {
              normal: {
                show: false,
              },
              emphasis: {
                show: false,
              },
            },
            animation: false,
            tooltip: {
              show: false,
            },
            data: [
              {
                value: 1,
                itemStyle: {
                  color: "rgba(250,250,250,0.3)",
                },
              },
            ],
          },
        ],
      };
      chartBox.setOption(option);
      // 根据页面大小自动响应图表大小
      autoHover(chartBox, option, 2000);
      window.addEventListener("resize", function () {
        chartBox.resize();
      });
    },
    getList() {
      // this.flag = true;
      this.videoInfoList = [];
      listVideoInfo(this.queryParams).then((response) => {
        this.videoInfoList = response.rows;
        if (this.videoInfoList.length > 0) {
          this.$nextTick(() => {
            this.clkVideoInfo(this.videoInfoList[0]);
            let arr = [];
            for (let i = 0; i < this.videoInfoList.length; i++) {
              arr.push({
                name: this.videoInfoList[i].name,
                info: "正常",
              });
            }
            this.listData = arr;
          });
        }
      });
    },

    clkVideoInfo(videoInfo) {
      // console.log('切换登录------------')
      if (videoInfo.id == this.videoId) {
        return false;
      }
      if (videoInfo.isYt == "Y") {
        this.isYtFlag = true;
      } else {
        this.isYtFlag = false;
      }
      if (this.netWork) {
        this.hkvInfo.ip = videoInfo.ipCode;
        this.hkvInfo.port = videoInfo.portCode;
      } else {
        this.hkvInfo.ip = videoInfo.insideIp;
        this.hkvInfo.port = videoInfo.insidePort;
      }
      this.hkvInfo.username = videoInfo.account;
      this.hkvInfo.password = videoInfo.password;
      this.hkvInfo.channels = [];
      this.videoId = videoInfo.id;
      if (!this.flag) {
        // console.log('切换登录A------------')
        this.onLogoutAndLogin();
      } else {
        // console.log('切换登录B------------')
        this.onLogin();
      }
      // if(this.flag){
      //   this.flag = false;
      // }
    },
    onLogoutAndLogin() {
      try {
        if (this.hkvInfoOld.ip != "" && this.hkvInfoOld.port != "") {
          // this.hkvInfo.channels = [];
          let szDeviceIdentify =
            this.hkvInfoOld.ip + "_" + this.hkvInfoOld.port;
          let iRet = WebVideoCtrl.I_Logout(szDeviceIdentify);
          if (0 == iRet) {
            // this.$message({
            //   showClose: true,
            //   message: '退出成功',
            //   type: 'success'
            // });
            this.hkvInfoOld.ip = "";
            this.hkvInfoOld.port = "";
            this.onLogin();
            return true;
          } else {
            // this.$message({
            //   showClose: true,
            //   message: '退出失败',
            //   type: 'error'
            // });
            return false;
          }
        } else {
          this.hkvInfoOld.ip = "";
          this.hkvInfoOld.port = "";
          this.onLogin();
          return true;
        }
      } catch (err) {
        //console.log('错误！')
      }
    },
  },
};
</script>

<style scoped lang="scss">
.main_padding {
  padding: 0 20px 15px;
  flex-direction: column;
}

.box {
  width: 100%;
  height: 100%;
  // background-image: url("../../../assets/image/bj.jpg");
  background-color: #1d1f46;
  background-size: cover;
}
.top-title {
  width: 100%;
  height: 90px;
  background-image: url("../../../assets/image/bg-title.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 32px;
  font-weight: bold;
}
.main-left {
  width: 25%;
  height: calc(100% - 90px - 30px);
  // display: flex;
  // flex: 1;
  // flex-direction: column;
  margin: 0 20px;
  float: left;
  .jdgk-box {
    background-image: url("../../../assets/image/box.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 100%;
    height: 33%;
    .main-box {
      width: 100%;
      height: calc(100% - 66px);
      // padding: 10px 10px;
      display: flex;
      flex-flow: row wrap;
      align-content: flex-start;
      justify-content: center;
    }
  }
}
.main-right {
  width: 25%;
  height: calc(100% - 90px - 30px);
  margin: 0 20px;
  float: left;
  .jdgk-box {
    background-image: url("../../../assets/image/box.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 100%;
    height: 33%;
    .main-box {
      width: 100%;
      height: calc(100% - 66px);
      // padding: 10px 10px;
      display: flex;
      flex-flow: row wrap;

      justify-content: space-between;
    }
  }
}
.box-title {
  background-image: url("../../../assets/image/box-title.png");
  background-size: 94% 100%;
  background-repeat: no-repeat;
  background-position: center center;
  width: 100%;
  height: 66px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 8px;
}
.box_main {
  height: calc(100% - 40px);
}
.text-box {
  width: 45%;
  height: 45%;
  margin: 5px 0px;
  background-image: url("../../../assets/image/box2.png");
  background-size: 100% 100%;
  .icon-box {
    display: flex;
    // justify-content: center;
    align-items: center;
    padding: 10px;
    width: 100%;

    .icon {
      // background-image: url("../../../assets/image/icon1.png");
      width: 30px;
      height: 30px;
      background-position: center center;
      background-size: 100% 100%;
    }
    // .icon_h {
    //   height: 25px;
    // }
  }
  .device-box {
    width: 100% !important;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .device-text {
    color: yellow;
    font-size: 28px;
  }
  .icon-text {
    color: #fff;
    font-size: 18px;
    // display: flex;
    // width: 150px;
    // height: 50px;
    float: left;
    // align-items: center;
    // justify-content: center;
    margin-left: 6px;
  }
}
::v-deep.dv-scroll-board .header {
  border: 1px solid #87cefa;
}

.backround {
  width: 94%;
  height: 1000px;
  // background-image: url("@/assets/3.jpg");
}
::v-deep .el-table,
::v-deep .el-table__expanded-cell {
  background-color: transparent;
}
/* 表格内背景颜色 */
::v-deep .el-table th,
::v-deep .el-table tr,
::v-deep .el-table td {
  background-color: transparent;
  color: #fff;
}
.seamless-warp {
  // height: 170px;
  height: 100%;
  overflow: hidden;
}
::v-deep.el-table .cell {
  text-align: center;
}
::v-deep.toptitle {
  width: 100%;
  display: flex;
  background-color: #87cefa;
  margin-bottom: 10px;
  border: 2px solid #87cefa;
  background-color: transparent;
  color: white;
}
.item {
  width: 33.3%;
  text-align: center;
}
.title-box-text {
  width: 100%;
  height: 20%;
  display: flex;
  // justify-content: space-around;
  justify-content: space-between;
  color: #fff;
  font-size: 20px;
  float: left;
  .text-left {
    width: 49%;
    background-image: url("../../../assets/image/box3.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center center;
    cursor: pointer;
  }
  .text-right {
    width: 49%;
    background-image: url("../../../assets/image/box3.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center center;
    cursor: pointer;
  }
}
.title-box-text_middle {
  background: rgba(20, 50, 84, 0.7);
  color: #fff;
  font-size: 20px;
  width: 50%;
  display: flex;
  align-items: center;
  padding: 15px 10px;
}
.box-content {
  width: 100%;
  display: flex;
  height: 80%;
  flex-wrap: wrap;
  background-color: rgba(20, 50, 84, 0.7);
  .child_box {
    width: 45%;
    height: 50px;
    // background: #000;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    .listText-icon {
      // background-image: url("../../../assets/image/种草养虾.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      width: 40px;
      height: 40px;
      margin-right: 10px;
    }
  }
  .child_box2 {
    width: 50%;
    height: 50px;
    float: left;
    // background: #000;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    .listText-icon {
      // background-image: url("../../../assets/image/种草养虾.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      width: 40px;
      height: 40px;
      margin-right: 10px;
    }
  }
  .seamless_box {
    width: 100%;
    height: 50%;
    overflow: hidden;
  }
  .seamless-warp_content {
    width: 100%;
    // height: 100%;
    display: flex;
    flex-wrap: wrap;
  }
  .color {
    color: #fff;
    font-size: 20px;
    text-align: center;
  }
}
.content_child_l {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.content_child_r {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.child_l {
  display: flex;
  justify-content: space-around;
}
.text-box1 {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 40px;
  width: 100%;
}
</style>
